<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</body>
<script>
    /* function Fn(){
        // {}
        // {}[[Prototype]] = Fn.prototype;
        // this-> {} 

        var arr = [1,2,3,4];
        Object.setPrototypeOf(arr, Fn.prototype)
        return arr;  // 伪数组  有数据的结构,但是不能使用数组的拓展方法

        // return this;
    }

    var res = new Fn();
    console.log(res); */



    // 伪数组转真数组
    // 1. 新建数组,手动遍历伪数组,将伪数组中的每个元素放到新数组中
    // 2. Array.from()
    // 3. 扩展运算符 ...
    // 4. Array.prototype.slice.call(liList)

    var liList = document.querySelectorAll("li");

    var arr = Array.from(liList);
    console.log(arr);

    var arr = [...liList];
    console.log(arr);



    // 模块化
    // 目的: 将一个大的项目差分成相互依赖的小文件, 使用时按需引入即可

    // 优点:
    // 1. 减少全局变量使用,(放置变量污染)   => 模块内的变量和方法都是局部的
    // 2. 按需暴露,按需引入   
    //    ES6 Model   => export    import  (前端页面)
    //    CommonJS    => module.exports={}    require  (NodeJS)
    // 3. 模块之间也是可以相互引入的
    // 4. 有利于代码后期维护

    // 组件化:

</script>
</html>